<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div>
    <div class="abstatic-height"></div>
    <div class="app-container calendar-list-container">
      <el-row>
        <div class="xf-tabletop-handles">
          <div class="xf-tabhd-left">
            <el-radio-group
              v-model="radioType"
              @change="switchTable"
              class="xf-tab-bts"
            >
              <el-radio-button label="sensor">传感器</el-radio-button>
              <el-radio-button label="device">网关设备</el-radio-button>
            </el-radio-group>
            <el-button
              class="filter-item"
              @click="handleCreate"
              type="primary"
              v-if="radioType === 'sensor'"
              size="mini"
              >添加传感器类型</el-button
            >
            <el-button
              class="filter-item"
              @click="handleCreateSimple"
              type="primary"
              v-else
              size="mini"
              >添加网关设备类型</el-button
            >
          </div>
          <div class="xf-tabhd-right" v-if="radioType === 'sensor'">
            所属系统
            <el-select
              v-model="listQuery.channelId"
              placeholder="请选择"
              class="xf-query-select"
              size="mini"
            >
              <el-option label="全部" value="-1"></el-option>
              <el-option
                v-for="item in queryAffiliate"
                :key="item.id"
                :label="item.channelName"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-button @click="tableQuery" type="primary" size="mini"
              >搜索</el-button
            >
            <el-popover
              placement="bottom-end"
              width="700"
              class="xf-custom-poper"
              @show="getSelected"
              v-model="visible2"
            >
              <div class="xf-double-form">
                <div class="xf-dbform-item">
                  <div class="xf-dbform-item__sleft">
                    <p class="xf-dbform-item__label">厂商</p>
                    <el-select
                      placeholder="请选择厂商"
                      v-model="slistQuery.manufacturer"
                    >
                      <el-option
                        :label="item"
                        :value="item"
                        v-for="item in manufeList"
                        :key="item"
                      ></el-option>
                    </el-select>
                  </div>
                  <div class="xf-dbform-item__sright">
                    <p class="xf-dbform-item__label">系列</p>
                    <el-select
                      placeholder="请选择系列"
                      v-model="slistQuery.equipmentType"
                    >
                      <el-option
                        :label="item"
                        :value="item"
                        v-for="item in equipmentTypeList"
                        :key="item"
                      ></el-option>
                    </el-select>
                  </div>
                </div>
                <div class="xf-dbform-item">
                  <div class="xf-dbform-item__sleft">
                    <p class="xf-dbform-item__label">型号</p>
                    <el-input
                      v-model="slistQuery.model"
                      placeholder="请输入型号"
                    ></el-input>
                  </div>
                </div>
              </div>
              <div style="text-align: left; margin: 0; margin-top: 20px">
                <el-button size="mini" type="primary" @click="pointerQuery"
                  >搜索</el-button
                >
                <el-button
                  type="text"
                  size="mini"
                  @click="visible2 = false"
                  pain
                  round
                  >取消</el-button
                >
              </div>
              <el-button slot="reference" type="text" size="mini"
                >高级搜索</el-button
              >
            </el-popover>
          </div>
          <div class="sxf-tabhd-right" v-else>
            厂商
            <el-select
              v-model="slistQuery.manufacturer"
              placeholder="请选择"
              class="xf-query-select"
              size="mini"
            >
              <el-option
                v-for="item in gatewayManufacturer"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            系列
            <el-select
              v-model="slistQuery.equipmentType"
              placeholder="请选择"
              class="xf-query-select"
              size="mini"
            >
              <el-option
                v-for="item in gatewayEquipmentType"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            型号
            <el-input
              v-model="slistQuery.model"
              placeholder="请输入型号"
              class="xf-query-input"
              size="mini"
            ></el-input>
            <el-button @click="tableQuery" type="primary">搜索</el-button>
          </div>
        </div>
      </el-row>
        <border-warp widthAuto> 
        <el-table
          key="0"
          :data="list"
          v-loading.body="listLoading"
          style="width: 100%"
          v-if="radioType === 'sensor'"
        >
          <el-table-column label="类型编号" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.sensorType.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="厂商">
            <template slot-scope="scope">
              <span>{{ scope.row.sensorType.sensorManufacturer }}</span>
            </template>
          </el-table-column>
          <el-table-column label="系列">
            <template slot-scope="scope">
              <span>{{ scope.row.sensorType.equipmentType }}</span>
            </template>
          </el-table-column>
          <el-table-column label="型号">
            <template slot-scope="scope">
              <span>{{ scope.row.sensorType.model }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属系统">
            <template slot-scope="scope">
              <span>{{ scope.row.sensorType.channelName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="测点">
            <template slot-scope="scope">
              <span>{{ scope.row.measuringPoint.join(",") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <span
                @click="handleUpdate(scope.row.sensorType)"
                class="comm-table-btn"
                ><icon-svg icon-class="bianji" style="fill: #2bdef5"
              /></span>
              <span
                @click="handleDelete(scope.row.sensorType)"
                class="comm-table-btn"
                ><icon-svg icon-class="shanchu" style="fill: #2bdef5"
              /></span>
            </template>
          </el-table-column>
        </el-table>
        <el-table
          key="1"
          :data="devicelist"
          v-loading.body="listLoading"
          style="width: 100%"
          v-else
        >
          <el-table-column label="类型编号" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="厂商">
            <template slot-scope="scope">
              <span>{{ scope.row.manufacturer }}</span>
            </template>
          </el-table-column>
          <el-table-column label="系列">
            <template slot-scope="scope">
              <span>{{ scope.row.equipmentType }}</span>
            </template>
          </el-table-column>
          <el-table-column label="型号">
            <template slot-scope="scope">
              <span>{{ scope.row.model }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <span
                @click="deviceHandleUpdate(scope.row)"
                class="comm-table-btn"
                ><icon-svg icon-class="bianji" style="fill: #2bdef5"
              /></span>
              <span @click="handleDelete(scope.row)" class="comm-table-btn"
                ><icon-svg icon-class="shanchu" style="fill: #2bdef5"
              /></span>
            </template>
          </el-table-column>
        </el-table> </border-warp>
      <div v-show="!listLoading" class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="listQuery.page"
          :page-sizes="[15, 20, 30, 50]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <slider-panel
        :Show.sync="dialogFormVisible"
        custom-class="out-side-frame"
      >
        <div class="form-content-frame">
          <div class="dialog-within-scroll">
            <el-form
              :model="form"
              :rules="rules"
              ref="form"
              label-width="100px"
              label-position="top"
              @submit.native.prevent
            >
              <el-form-item label="厂商" prop="manufacturer">
                <el-select
                  placeholder="请选择厂商"
                  v-model="form.manufacturer"
                  style="width: 100%"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="item in selectManufact"
                    :key="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="系列" prop="sensorType">
                <el-input
                  v-model.trim="form.sensorType"
                  placeholder="请输入传感器系列"
                ></el-input>
              </el-form-item>
              <el-form-item label="型号" prop="model">
                <el-input
                  v-model.trim="form.model"
                  placeholder="请输入传感器型号"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="所属系统"
                prop="channelId"
                style="width: 100%"
              >
                <el-select
                  v-model="form.channelId"
                  placeholder="请选择所属系统"
                  style="width: 100%"
                  :disabled="channelEdit"
                >
                  <el-option
                    v-for="item in selectChannel"
                    :key="item.id"
                    :label="item.channelName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="测点" prop="measuringPointIds">
                <el-checkbox-group v-model="form.measuringPointIds">
                  <el-checkbox
                    v-for="item in devicePoinsts"
                    :label="item.id"
                    :key="item.id"
                    >{{ item.measuringPoint }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                      item.codeName
                    }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                      item.dataUnit
                    }}</el-checkbox
                  >
                </el-checkbox-group>
              </el-form-item>
              <el-form-item>
                <el-button
                  v-if="dialogStatus === 'create'"
                  type="primary"
                  @click="create('form')"
                  size="mini"
                  native-type="submit"
                  >确 定</el-button
                >
                <el-button
                  v-else
                  type="primary"
                  @click="update('form')"
                  size="mini"
                  native-type="submit"
                  >确 定</el-button
                >
                <el-button @click="cancel('form')" size="mini" type="text"
                  >取 消</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </slider-panel>
      <slider-panel
        :Show.sync="devicedialogFormVisible"
        custom-class="out-side-frame"
      >
        <div class="form-content-frame">
          <el-form
            :model="deviceform"
            :rules="devicerules"
            ref="deviceform"
            label-width="100px"
            label-position="top"
            @submit.native.prevent
          >
            <el-form-item label="厂商" prop="manufacturer">
              <el-select
                placeholder="请选择厂商"
                v-model="deviceform.manufacturer"
                style="width: 100%"
              >
                <el-option
                  :label="item"
                  :value="item"
                  v-for="item in sselectManufact"
                  :key="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="系列" prop="equipmentType">
              <el-input
                v-model.trim="deviceform.equipmentType"
                placeholder="请输入网关设备系列"
              ></el-input>
            </el-form-item>
            <el-form-item label="型号" prop="model">
              <el-input
                v-model.trim="deviceform.model"
                placeholder="请输入网关设备系列"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                v-if="dialogStatus === 'create'"
                type="primary"
                @click="deviceCreate('deviceform')"
                size="mini"
                native-type="submit"
                >确 定</el-button
              >
              <el-button
                v-else
                type="primary"
                @click="deviceUpdate('deviceform')"
                size="mini"
                native-type="submit"
                >确 定</el-button
              >
              <el-button
                @click="deviceCancel('deviceform')"
                size="mini"
                type="text"
                >取 消</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </slider-panel>
      <!-- 删除操作弹窗 -->
      <el-dialog
        :title="radioType === 'sensor' ? '删除传感器系列' : '删除网关设备系列'"
        :visible.sync="dialogDeleteVisible"
        :show-close="false"
        custom-class="xf-jc-dialog"
        width="360px"
      >
        <div class="xf-jc-deletect" v-if="deleteJumpObj.length > 0">
          <p v-if="radioType === 'sensor'">
            有{{
              deleteJumpObj.length
            }}个子站使用了此传感器系列，无法删除。请联系子站管理员停用传感器系列再删除
          </p>
          <p v-else>
            有{{
              deleteJumpObj.length
            }}个子站使用了此网关设备系列，无法删除。请联系子站管理员解绑后再删除
          </p>
          <div>
            <el-button type="text" @click="openChildsites">
              查看子站
              <i class="el-icon-d-arrow-right"></i>
            </el-button>
          </div>
        </div>
        <div class="xf-jc-deletect" v-else>
          <p v-if="radioType === 'sensor'">
            无子站使用此传感器系列，确定删除？
          </p>
          <p v-else>无子站使用此网关设备系列，确定删除？</p>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button
            type="danger"
            size="mini"
            v-if="deleteJumpObj.length < 1"
            @click="deleteD(currentSelectObj)"
            >删除</el-button
          >
          <el-button
            type="text"
            size="mini"
            v-if="deleteJumpObj.length < 1"
            @click="dialogDeleteVisible = false"
            >取消</el-button
          >
          <el-button
            type="primary"
            size="mini"
            v-if="deleteJumpObj.length > 0"
            @click="dialogDeleteVisible = false"
            >知道了</el-button
          >
        </div>
      </el-dialog>
      <childSiteDialog
        :Show.sync="childSitesShow"
        :siteIds.sync="childSiteids"
      ></childSiteDialog>
    </div>
  </div>
</template>

<script>
import childSiteDialog from "@/components/ChildsiteList";

import {
  page,
  affiliated,
  deleteQuery,
  deviceAddObj,
  deviceGetObj,
  devicePutObj,
  deviceDelObj,
  deviceDeleteQuery,
  devicePage,
  devicePoint,
  gatewaySelect,
  addObj,
  getObj,
  delObj,
  putObj,
} from "@/api/device/deviceSensorSeries/index";
import sliderPanel from "@/components/SliderPanel";
export default {
  name: "deviceSensorSeries",
  components: { childSiteDialog, sliderPanel },
  data() {
    return {
      childSitesShow: false,
      channelEdit: false,
      childSiteids: "",
      queryAffiliate: [], //所属系统条件
      manufeList: [], //厂商列表
      equipmentTypeList: [], //系列列表
      visible2: false,
      selectChannel: [],
      selectManufact: [],
      gatewayEquipmentType: [], //网关查询条件
      gatewayManufacturer: [],
      sselectManufact: [], //添加查询厂商列表
      radioType: "sensor",
      sensorId: "",
      deviceform: {
        manufacturer: "",
        equipmentType: "",
        model: "",
      },
      devicerules: {
        manufacturer: [
          {
            required: true,
            message: "请选择厂商",
            trigger: "change",
          },
        ],
        model: [
          {
            required: true,
            message: "请输入型号",
            trigger: "blur",
          },
          {
            min: 1,
            max: 50,
            message: "最多允许输入50个字符",
            trigger: "blur",
          },
        ],
        equipmentType: [
          {
            required: true,
            message: "请输入网关设备系列",
            trigger: "blur",
          },
          {
            min: 1,
            max: 50,
            message: "最多允许输入50个字符",
            trigger: "blur",
          },
        ],
      },
      form: {
        sensorType: "",
        model: "",
        manufacturer: "",
        channelId: "",
        measuringPointIds: [],
      },
      rules: {
        sensorType: [
          {
            required: true,
            message: "请输入传感器系列",
            trigger: "blur",
          },
          {
            min: 1,
            max: 50,
            message: "最多允许输入50个字符",
            trigger: "blur",
          },
        ],
        model: [
          {
            required: true,
            message: "请输入传感器型号",
            trigger: "blur",
          },
          {
            min: 1,
            max: 100,
            message: "最多允许输入100个字符",
            trigger: "blur",
          },
        ],
        manufacturer: [
          {
            required: true,
            message: "请选择传感器厂商",
            trigger: "change",
          },
        ],
        channelId: [
          {
            required: true,
            message: "请选择传感器所属系统",
            trigger: "change",
          },
        ],
        measuringPointIds: [
          {
            required: true,
            message: "请选择测点",
            trigger: "change",
          },
        ],
      },
      list: null,
      devicelist: null,
      devicePoinsts: [],
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 15,
        channelId: "-1",
      },
      slistQuery: {
        manufacturer: "全部",
        equipmentType: "全部",
        model: "",
      },
      dialogFormVisible: false,
      devicedialogFormVisible: false,
      dialogDeleteVisible: false,
      deleteJumpObj: "",
      currentSelectObj: {},
      dialogStatus: "",
      textMap: {
        update: "编辑传感器类型",
        create: "添加传感器类型",
      },
      gatetextMap: {
        update: "编辑网关设备类型",
        create: "添加网关设备类型",
      },
      tableKey: 0,
    };
  },
  created() {
    this.getList();
    this.getAffiliated();
    this.getDevicePoinst();
  },
  computed: {},
  methods: {
    getGateways() {
      // 网关条件查询
      gatewaySelect().then((res) => {
        this.gatewayEquipmentType = res.data.equipmentType; //网关查询条
        this.gatewayManufacturer = res.data.manufacturer;
        this.sselectManufact = res.data.selectManufacturer;
      });
    },
    getAffiliated() {
      affiliated().then((res) => {
        //初始化查询条件
        this.queryAffiliate = res.data.channel;
        this.selectChannel = res.data.selectChannel;
        this.selectManufact = res.data.selectManufacturer;
      });
    },
    openChildsites() {
      this.childSitesShow = true;
    },
    advancedSearchReset() {
      this.slistQuery.manufacturer = "全部";
      this.slistQuery.equipmentType = "全部";
      this.slistQuery.model = "";
    },
    tableQuery() {
      if (this.radioType === "sensor") {
        //重置高级查询条件
        this.advancedSearchReset();
        this.getList();
      } else {
        this.getDeviceList();
      }
    },
    getSelected() {
      // 获取高级查询条件
      affiliated().then((res) => {
        this.equipmentTypeList = res.data.equipmentType;
        this.manufeList = res.data.manufacturer;
      });
    },
    pointerQuery() {
      // 高级查询
      this.visible2 = false;
      this.listLoading = true;
      // 取消绑定并合并查询条件
      let contactKeys = Object.assign(
        JSON.parse(JSON.stringify(this.listQuery)),
        JSON.parse(JSON.stringify(this.slistQuery))
      );
      page(contactKeys).then((response) => {
        this.list = response.data.rows;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    switchTable() {
      // 切换按钮时重置分页查询条件
      this.listQuery.page = 1;
      this.listQuery.limit = 15;
      this.advancedSearchReset();
      if (this.radioType === "sensor") {
        this.listQuery.channelId = "-1";
        this.getList();
        this.getAffiliated();
      } else {
        this.listQuery.channelId = undefined;
        this.getGateways();
        this.getDeviceList();
      }
    },
    getList() {
      this.listLoading = true;
      page(Object.assign(this.listQuery, this.slistQuery)).then((response) => {
        this.list = response.data.rows;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    handlerest() {
      this.sensorId = "";
      this.form.sensorType = undefined;
      this.form.measuringPointIds = [];
      this.form.channelId = "";
      this.form.model = "";
      this.form.manufacturer = "";
    },
    deviceHandlerest() {
      this.deviceform.type = undefined;
    },
    getDevicePoinst() {
      devicePoint().then((response) => {
        this.devicePoinsts = response;
      });
    },
    getDeviceList() {
      this.listLoading = true;
      devicePage(Object.assign(this.listQuery, this.slistQuery))
        .then((response) => {
          this.devicelist = response.data.rows;
          this.total = response.data.total;
          this.listLoading = false;
        })
        .catch(function (error) {
          this.listLoading = false;
          console.log(error);
        });
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      if (this.radioType === "sensor") {
        this.getList();
      } else {
        this.getDeviceList();
      }
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      if (this.radioType === "sensor") {
        this.getList();
      } else {
        this.getDeviceList();
      }
    },
    handleCreate() {
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.channelEdit = false;
      this.$refs["form"].resetFields();
    },
    handleCreateSimple() {
      this.dialogStatus = "create";
      this.devicedialogFormVisible = true;
      this.channelEdit = false;
      this.deviceform = {};
    },
    handleUpdate(row) {
      getObj(row.id)
        .then((res) => {
          if (res.status === 200) {
            this.sensorId = res.data.sensorType.id;
            this.form.sensorType = res.data.sensorType.equipmentType;
            this.devicePoinsts = res.data.measuringPoint;
            this.channelEdit = res.data.channelFlag;

            let checkedItem = res.data.measuringPoint;
            let checkedIds = [];
            checkedItem.forEach((item) => {
              if (item.checked === true) {
                checkedIds.push(item.id);
              }
            });
            this.form.measuringPointIds = checkedIds;
            this.form.model = res.data.sensorType.model;
            this.form.channelId = res.data.sensorType.channelId;
            this.form.manufacturer = res.data.sensorType.manufacturer;
            this.dialogFormVisible = true;
            this.dialogStatus = "update";
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    deviceHandleUpdate(row) {
      deviceGetObj(row.id).then((response) => {
        this.deviceform = response.data;
        this.devicedialogFormVisible = true;
        this.dialogStatus = "update";
      });
    },
    deleteD(row) {
      if (this.radioType === "sensor") {
        delObj(row.id)
          .then(() => {
            this.dialogDeleteVisible = false;
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000,
            });
            this.getList();
          })
          .catch(function (error) {
            console.log(error);
          });
      } else {
        deviceDelObj(row.id)
          .then(() => {
            this.dialogDeleteVisible = false;
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000,
            });
            this.getDeviceList();
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    handleDelete(row) {
      // 删除操作查询
      let self = this;
      if (this.radioType === "sensor") {
        deleteQuery(row.id)
          .then((response) => {
            if (response.status === 200) {
              self.currentSelectObj = row;
              self.dialogDeleteVisible = true;
              self.deleteJumpObj = response.data;
              self.childSiteids = response.data.join(",");
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      } else {
        deviceDeleteQuery(row.id)
          .then((res) => {
            if (res.status === 200) {
              self.currentSelectObj = row;
              self.dialogDeleteVisible = true;
              self.deleteJumpObj = res.data;
              self.childSiteids = res.data.join(",");
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    create(formName) {
      const set = this.$refs;
      let self = this;
      set[formName].validate((valid) => {
        if (valid) {
          addObj(
            Object.assign(this.form, {
              measuringPointIds: JSON.parse(
                JSON.stringify(this.form.measuringPointIds.join(","))
              ),
            })
          )
            .then((res) => {
              this.dialogFormVisible = false;

              this.$refs[formName].resetFields();
              this.handlerest();

              this.getList();
              this.$notify({
                title: "成功",
                message: "创建成功",
                type: "success",
                duration: 2000,
              });
            })
            .catch(function (error) {
              console.log(error);
              self.$refs[formName].resetFields();
              self.handlerest();
            });
        } else {
          return false;
        }
      });
    },
    deviceCreate(formName) {
      const set = this.$refs;
      set[formName].validate((valid) => {
        if (valid) {
          deviceAddObj(this.deviceform)
            .then(() => {
              this.devicedialogFormVisible = false;

              this.$refs[formName].resetFields();
              this.deviceHandlerest();

              this.getDeviceList();
              this.$notify({
                title: "成功",
                message: "创建成功",
                type: "success",
                duration: 2000,
              });
            })
            .catch(function (error) {
              console.log(error);
            });
        } else {
          return false;
        }
      });
    },
    cancel(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
      this.handlerest(formName);
    },
    deviceCancel(formName) {
      this.devicedialogFormVisible = false;
      this.$refs[formName].resetFields();
      this.deviceHandlerest(formName);
    },
    update(formName) {
      const set = this.$refs;
      let self = this;
      set[formName].validate((valid) => {
        if (valid) {
          this.form.id = this.sensorId;
          putObj(
            Object.assign(this.form, {
              measuringPointIds: JSON.parse(
                JSON.stringify(this.form.measuringPointIds.join(","))
              ),
            })
          )
            .then((res) => {
              this.dialogFormVisible = false;

              this.$refs[formName].resetFields();
              this.handlerest();
              this.getList();
              this.$notify({
                title: "成功",
                message: "修改成功",
                type: "success",
                duration: 2000,
              });
            })
            .catch(function (error) {
              self.$refs[formName].resetFields();
              self.handlerest();
              console.log(error);
            });
        } else {
          return false;
        }
      });
    },
    deviceUpdate(formName) {
      const set = this.$refs;
      set[formName].validate((valid) => {
        if (valid) {
          devicePutObj(this.deviceform)
            .then(() => {
              this.devicedialogFormVisible = false;

              this.$refs[formName].resetFields();
              this.deviceHandlerest();
              this.getDeviceList();
              this.$notify({
                title: "成功",
                message: "修改成功",
                type: "success",
                duration: 2000,
              });
            })
            .catch(function (error) {
              console.log(error);
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
// 精准查询
.xf-double-form {
  .xf-dbform-item {
    display: flex;
    justify-content: space-between;
    .xf-dbform-item__sleft {
      .el-input {
        width: 320px;
      }
    }
    .xf-dbform-item__sright {
      .el-input {
        width: 320px;
      }
    }
  }
}
.sxf-tabhd-right {
  .xf-query-input,
  .xf-query-select {
    width: 150px;
    margin: 0 10px;
  }
}

.fulldialog .el-dialog__title {
  font-size: 32px;
}
.fulldialog {
  .el-dialog__header {
    margin-top: 20px;
  }
  .el-checkbox {
    display: block;
    margin-left: 0;
  }
  .custom-dialog-btn {
    position: absolute;
    font-size: 30px;
    right: 40px;
    top: 20px;
    color: #fff;
    &:hover {
      cursor: pointer;
    }
  }
  .dialog-footer {
    text-align: left;
  }
}
</style>
